<template>
	<coreshop-page title="分销" mode="left">
		<view class="content">
			<view class="header">
				<view class="info">
					<view class="left">
						<image class="avatar" :src="state.userInfo.avatarImage">
						</image>
						<view class="name-phone">
							<view class="name">{{state.userInfo.nickName}}</view>
							<view class="phone">{{state.info.gradeName}}</view>
						</view>
					</view>
					<view class="right">
						<view class="detail"
							@click="handleRouteNavigateTo('/pages/subpackage/distribution/commission-detail/index')">明细
						</view>
						<view class="toggle" @click="state.showMoney = !state.showMoney">
							<uv-icon v-if="state.showMoney" name="eye" color="#ffffff" size="20"></uv-icon>
							<uv-icon v-else name="eye-off-outline" color="#ffffff" size="20"></uv-icon>
						</view>
					</view>
				</view>
				<view class="money_box">
					<view class="item">
						<view class="label">已结算金额</view>
						<view class="val">{{ state.showMoney ? state.info.settlementAmount || '0.00' : '***' }}</view>
					</view>
					<view class="item">
						<view class="label">待入账金额</view>
						<view class="val">{{ state.showMoney ? state.info.freezeAmount || '0.00' : '***' }}</view>
					</view>
					<view class="item">
						<view class="label">本月订单数</view>
						<view class="val">{{ state.showMoney ? state.info.currentMonthOrder || '0.00' : '***' }}</view>
					</view>
				</view>
			</view>
			<view class="tabs">
				<view class="tab" @click="handleRouteNavigateTo('/pages/subpackage/distribution/team/index')">
					<view class="left">
						<image class="tab_icon"
							:src="handleStaticResources( '/static/images/distribution/distribution_icon1.png')">
						</image>
						<view class="name">我的团队</view>
					</view>
					<view class="right">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="tab"
					@click="handleRouteNavigateTo('/pages/subpackage/distribution/commission-detail/index')">
					<view class="left">
						<image class="tab_icon"
							:src="handleStaticResources( '/static/images/distribution/distribution_icon2.png')">
						</image>
						<view class="name">佣金明细</view>
					</view>
					<view class="right">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="tab" @click="handleRouteNavigateTo('/pages/subpackage/distribution/order/index')">
					<view class="left">
						<image class="tab_icon"
							:src="handleStaticResources( '/static/images/distribution/distribution_icon3.png')">
						</image>
						<view class="name">分销订单</view>
					</view>
					<view class="right">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="tab" v-if="shopConfigStore.config?.distributionStore == OpenDistributionEnum.yes"
					@click="handleRouteNavigateTo(`/pages/subpackage/distribution/store/index?store=${state.info?.store}`)">
					<view class="left">
						<image class="tab_icon"
							:src="handleStaticResources( '/static/images/distribution/distribution_icon4.png')">
						</image>
						<view class="name">我的店铺</view>
					</view>
					<view class="right">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="tab" v-if="shopConfigStore.config?.distributionStore == OpenDistributionEnum.yes"
					@click="handleRouteNavigateTo('/pages/subpackage/distribution/store-set/index')">
					<view class="left">
						<image class="tab_icon"
							:src="handleStaticResources( '/static/images/distribution/distribution_icon5.png')">
						</image>
						<view class="name">店铺设置</view>
					</view>
					<view class="right">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="tab" @click="handleRouteNavigateTo('/pages/subpackage/distribution/rank/index')">
					<view class="left">
						<image class="tab_icon"
							:src="handleStaticResources( '/static/images/distribution/distribution_icon6.png')">
						</image>
						<view class="name">分销排行</view>
					</view>
					<view class="right">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="tab" @click="handleCreatePoster">
					<view class="left">
						<image class="tab_icon"
							:src="handleStaticResources( '/static/images/distribution/distribution_icon7.png')">
						</image>
						<view class="name">邀请海报</view>
					</view>
					<view class="right">
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
			</view>
		</view>
	</coreshop-page>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { queryDistributionInfo, queryUserInfo, queryShare } from '@/core/api';
	import { handleShowToast, handleStaticResources, handleRouteNavigateTo, handleRouteRedirectTo, getShareUrl } from '@/core/utils';
	import type { Response, UserInfoType } from '@/core/models';
	import { DistributionApplyStatus, OpenDistributionEnum, ShareClientEnum, ShareModelEnum, ShareEnum } from '@/core/enum';
	import { useShopConfigStore } from '@/core/store';
	import { shareUrl, UserToken } from '@/core/consts';
	import { queryParams } from '@/uni_modules/uv-ui-tools/libs/function/index.js';

	// 获取项目配置
	const shopConfigStore = useShopConfigStore();

	const state = reactive<{
		info : any;
		shareUrl : string;
		userInfo : UserInfoType,
		showMoney : boolean;
	}>({
		info: {},
		shareUrl: "",
		userInfo: {},
		showMoney: false,
	})

	onLoad(() => {
		getUserInfo();
		getDistributionInfo();
	});

	/** 获取用户信息 */
	const getUserInfo = async () => {
		const userInfo : Response<UserInfoType> = await queryUserInfo();
		state.userInfo = userInfo?.data;
	}

	/** 获取分销商进度状态 */
	const getDistributionInfo = async () => {
		const info : Response<any> = await queryDistributionInfo();
		if (info.status) {
			state.info = info.data;
			if (info.data?.verifyStatus != DistributionApplyStatus.success) {
				handleRouteRedirectTo('/pages/subpackage/distribution/apply/index');
			}

			state.shareUrl = await getShareUrl({
				client: ShareClientEnum.wxMiNiProgram,
				url: shareUrl,
				type: ShareModelEnum.url,
				page: ShareEnum.inv,
				params: {
					store: state.info.store
				}
			})
		} else {
			handleShowToast(info.msg)
		}
	}
	/** 生成海报 */
	const handleCreatePoster = async () => {
		let data : any = {
			client: ShareClientEnum.wxMiNiProgram,
			url: shareUrl,
			type: ShareModelEnum.poster,
			page: ShareEnum.inv,
			params: {
				store: state.info.store
			}
		}
		if (uni.getStorageSync(UserToken)) {
			data['token'] = uni.getStorageSync(UserToken)
		}
		const share = await queryShare(data);
		if (share.status) {
			data.params.posterUrl = share.data;
			data.params.shareType = ShareEnum.inv;
			handleRouteNavigateTo(`/pages/share/sharePoster/sharePoster` + queryParams(data.params));
		} else {
			handleShowToast(share.msg);
		}
	}

	/** 分享 */
	onShareAppMessage(() => {
		return {
			title: state.info?.storeName ? state.info?.storeName : shopConfigStore.config.shareTitle,
			imageUrl: state.info?.storeLogo ? state.info?.storeLogo : shopConfigStore.config.shareImage,
			path: state.shareUrl
		}
	});
	onShareTimeline(() => {
		return {
			title: state.info?.storeName ? state.info?.storeName : shopConfigStore.config.shareTitle,
			imageUrl: state.info?.storeLogo ? state.info?.storeLogo : shopConfigStore.config.shareImage,
			path: state.shareUrl
		}
	});
</script>

<style scoped lang="scss">
	@import './index.scss'
</style>